<template>
  <div class="login-box">
    <div class="loginTitle">
      <span align="center"> 鲜花网总后台管理系统 </span>
    </div>

    <el-form :model="loginForm" status-icon :rules="rules" ref="loginForm" label-width="100px" class="demo-loginForm"
             align="center">
      <div class="loginDiv">
        <el-form-item label="用户名：" prop="accountName">
          <el-input v-model.number="loginForm.accountName"></el-input>
        </el-form-item>

        <el-form-item label="密码：" prop="password">
          <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item v-if="showCaptcha" label="验证码：" prop="code">
          <el-input v-model="loginForm.code" placeholder="请输入验证码"
                    style="width: 50%;position: absolute;"></el-input>
          <el-input v-model="loginForm.codeId" type="hidden"></el-input>
          <img id="code" :src="captchaSrc" alt="验证码" @click="flushCode()"
               style="position: absolute;right: 50px;height: 50px"/>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('loginForm')" class="button">登录</el-button>
          <el-button @click="resetForm('loginForm')" align="center" class="button">重置</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>


<script>
import {Message} from "element-ui";

export default {
  name: "LoginView",
  data() {
    let validateName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名'));
      } else {
        callback();
      }
    };
    let validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        callback();
      }
    };

    let validateCode = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入验证码'));
      } else {
        callback();
      }
    }

    return {
      loginForm: {
        accountName: '',
        password: '',
        code: '',
      },
      showCaptcha: true, //是否显示验证码
      captchaSrc: '',
      rules: {
        accountName: [
          {validator: validateName, trigger: 'blur'}
        ],
        password: [
          {validator: validatePass, trigger: 'blur'}
        ],
        code: [
          {validator: validateCode, trigger: 'blur'}
        ]

      }
    };
  },

  created() {
    this.flushCode();
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //验证通过
          console.log("---确定登录---")


          let url = "/account/login";
          let params = new URLSearchParams;
          params.append('accountName', this.loginForm.accountName);
          params.append('password', this.loginForm.password);
          params.append("code", this.loginForm.code);
          params.append("codeId", this.loginForm.codeId);
          this.$axios.post(url, params)
              .then((res) => {
                console.log(res.data.data);
                if (res.data.code === 200) {
                  this.$message.success('登录成功');

                  //登陆成功之后，得到后端返回的token
                  let token = res.headers['authentication'];
                  console.log("前端得到的token" + token);
                  //把token存在本地缓存里
                  sessionStorage.setItem("token", token);
                  //把用户名存在本地缓存里
                  sessionStorage.setItem("loginName", this.loginForm.accountName)

                  //成功登录 使用路由跳转页面
                  this.$router.push("/welcome");
                } else if (res.data.code == 500) {
                  Message({
                    type: 'error',
                    message: res.data.message,
                    duration: 2000
                  })
                  setTimeout(function () {
                    location.reload();
                  }, 1000);
                }
              })

        } else {
          console.log('error submit!!');
          this.$message.error('错了哦，请正确输入信息');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    flushCode() {
      let url = "/code/getCode";
      this.$axios.get(url).then(res => {
        if (res.data.code == 200) {
          this.captchaSrc = res.data.data.code;
          this.loginForm.codeId = res.data.data.codeId;
        }
      })
    }
  }
}
</script>
<style scoped lang="less">
.loginTitle {
  margin-bottom: 30px;
  text-align: center;
  font-size: 24px;
  color: #333;
  font-weight: bold;
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
  font-family: "Helvetica Neue";
  font-style: italic;
  letter-spacing: 5.2pt;
}

.loginDiv {
  width: 500px;
  margin: 0 auto;
  padding: 20px;
  font-size: 12px;
  color: #333744;
}

.button {
  padding: 15px 25px;
  border: unset;
  border-radius: 15px;
  color: #212121;
  z-index: 1;
  background: #e8e8e8;
  position: relative;
  font-weight: 1000;
  font-size: 17px;
  -webkit-box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27);
  box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27);
  transition: all 250ms;
  overflow: hidden;
}

.button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  border-radius: 15px;
  background-color: #212121;
  z-index: -1;
  -webkit-box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27);
  box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27);
  transition: all 250ms
}

.button:hover {
  color: #e8e8e8;
}

.button:hover::before {
  width: 100%;
}

</style>